<template>
  <div class="dimission">
    <div>
      <div class="bgg">
        <div class="card_title">
          通知管理
        </div>
        <a-button
          type="primary"
          class="br4 float_right"
          style="margin-bottom: 18px;z-index:9899"
          @click="informs = true">
          <a-icon type="plus"/>
          发布通知
        </a-button>
        <a-table
          :columns="columns"
          :rowKey="activity => activity.id"
          :dataSource="activity"
          :loading="loading"
          @change="handleTableChange"
          :pagination="pagination"
        >
          <div slot="pic" slot-scope="text,row">
            <img :src="row.pic" alt="" style="width:83px;height:40px;border-radius: 6px;">
          </div>
          <div slot="article_title" slot-scope="text,row">
            <span
              style="color:#2396F9;cursor: pointer"
              @click="goarticle(row.content_id)"> {{ row.article_title }} </span>
          </div>
          <div slot="active" slot-scope="row">
            <a-popconfirm placement="left" ok-text="确认" cancel-text="取消" @confirm="dowithdraw(row.id)">
              <template slot="title">
                确认要撤回吗?
              </template>
              <a-button type="link" style="color:red">撤回</a-button>
            </a-popconfirm>
          </div>
        </a-table>
      </div>
    </div>
    <a-modal
      v-model="informs"
      :width="556"
      title="同步通知"
      :closable="true"
      :maskClosable="true"
      :centered="true"
      class="modal2"
      :bodyStyle="{
        padding:'13px'
      }"
      @ok="dorelease"
    >
      <div class="inform">
        <div style="margin-bottom: 11px">
          <span>选择文章：</span>
          <a-select
            label-in-value
            style="width: 434px;margin-right: 5px;"
            placeholder="选择文章"
            @change="articleChange"
            class="br4"
            v-model="articleid"
            allowClear
          >
            <a-select-option :value="v.id" v-for="v in activity" :key="v.id">
              {{ v.title }}
            </a-select-option>
          </a-select>
        </div>
        <div style="margin-bottom: 13px;">
          <img :src="articleimg" alt="" style="width:510px;height:260px;border-radius: 10px;">
        </div>
        <div style="margin-bottom: 15px;">
          <span>标题：</span>
          <a-input placeholder="输入通知标题" style="width:469px" v-model="title"/>
        </div>
        <div>
          <span>对象：</span>
          <a-radio-group v-model="type" @change="informobjChange">
            <a-radio :value="1">
              所有站点
            </a-radio>
            <a-radio :value="2">
              本站点
            </a-radio>
            <a-radio :value="3">
              <a-input
                placeholder="指定用户"
                style="width:266px;height:27px;"
                v-model="informobjid"
                @focus="type = 3"/>
            </a-radio>
          </a-radio-group>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
  import { dowithdrawmessage, getadminmessage } from '@/api/messageApi'
  import moment from 'moment'
  import { doaddnoticemsg } from '@/api/articleApi'

  export default {
    name: 'Dimission',
    data () {
      return {
        moment,
        informs: false,
        columns: [
          {
            title: 'ID',
            align: 'left',
            dataIndex: 'id',
            scopedSlots: {
              customRender: 'id'
            }
          },
          {
            title: '预览图',
            align: 'center',
            dataIndex: 'pic',
            scopedSlots: {
              customRender: 'pic'
            }
          },
          {
            title: '通知标题',
            // width: 150,
            align: 'title',
            dataIndex: 'title',
            scopedSlots: {
              customRender: 'title'
            }
          },
          {
            title: '跳转文章',
            align: 'center',
            dataIndex: 'article_title',
            scopedSlots: {
              customRender: 'article_title'
            }
          },
          {
            title: '文章ID',
            align: 'center',
            dataIndex: 'content_id',
            scopedSlots: {
              customRender: 'content_id'
            }
          },
          {
            title: '已读人数',
            align: 'center',
            dataIndex: 'read_num',
            scopedSlots: {
              customRender: 'read_num'
            }
          },
          {
            title: '未读人数',
            align: 'center',
            dataIndex: 'unread_num',
            scopedSlots: {
              customRender: 'unread_num'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: {
              customRender: 'active'
            }
          }
        ],
        activity: [],
        loading: false,
        pagination: {
          pageSize: 15,
          page: 1
        },
        type: 1,
        articleimg: '',
        title: '',
        articleid: [],
        informobjid: ''
      }
    },
    computed: {},
    created () {
      this.getadminmessage(1, 15)
    },
    mounted () {
    },
    methods: {
      getadminmessage (page, pagesize) {
        this.loading = true
        getadminmessage({
          page: page,
          pagesize: pagesize
        }).then(res => {
          console.log(res)
          this.activity = res.data.data
          const pagination = {
            ...this.pagination
          }
          pagination.total = res.data.count
          this.pagination = pagination
          this.loading = false
        }).catch(err => {
          console.log(err)
        })
      },
      goarticle (id) {
        this.$router.push(
          {
            path: '/helpcenter/article',
            query: {
              id: id
            }
          }
        )
      },
      dowithdraw (id) {
        dowithdrawmessage({
          msg_id: id
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success('撤回成功!')
            this.getadminmessage(1, 15)
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      dorelease () {
        doaddnoticemsg({
          type: this.type,
          title: this.title,
          pic: this.articleimg,
          redirect_url: this.article_id,
          user_id: this.informobjid
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.articleimg = ''
            this.article_id = ''
            this.title = ''
            this.articleid = []
            this.inform = false
            this.$message.success('发布成功!')
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      openinform (item) {
        console.log(item)
        this.articleimg = item.pic
        this.article_id = item.id
        this.articleid = [
          {
            key: item.id,
            label: item.title
          }
        ]
        this.getclasscontent()
        this.inform = true
      },
      informobjChange (e) {
        console.log('radio checked', e.target.value)
      },

      articleChange (value) {
        console.log(value) //
        if (value === undefined) {
          this.article_id = null
        } else {
          this.article_id = value.key
        }
        const obj = this.getobjnature(this.activity, 'id', value.key)
        console.log(obj)
        this.articleimg = obj.pic
        // this.getgroupfinance(1, 15, this.search)
      },
      getobjnature (list, key, nature) {
        for (const i in list) {
          if (list[i][key] === nature) {
            return list[i]
          }
        }
        return null
      },

      onClose () {
        this.drawershow = false
        this.username = ''
      },

      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.getadminmessage(params.page, 15)
      }

    }
  }
</script>
<style lang="less">
  .drawer1 {
    .titles {
      color: rgba(16, 16, 16, 100);
      font-size: 13px;
      text-align: left;
      margin-bottom: 8px;
    }

    .chooseipt {
      width: 100%;
      margin-bottom: 25px;
    }

    /deep/ .ant-input {
      border-radius: 4px;
    }

    /deep/ .ant-select-selection {
      border-radius: 4px;
    }
  }

  .modal1 {
    .ant-modal-content {
      border-radius: 6px !important;
    }

    .ant-table-tbody > tr > td:first-child {
      border-left: none !important;
    }

    .ant-table-tbody > tr > td:last-child {
      border-right: none !important;
    }
  }

  .modal2 {
    .ant-modal-content {
      border-radius: 4px !important;
    }

    .ant-select-selection {
      border-radius: 4px;
    }

    .ant-input {
      border-radius: 4px;
    }
  }
</style>
<style lang="less" scoped>
  .dimission {
    /deep/ .ant-input {
      border-radius: 4px;
    }

    /deep/ .ant-select-selection {
      border-radius: 4px;
    }

    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 20px;
      margin-bottom: 18px;
      font-weight: 600;
    }

    .bgg {
      border-radius: 8px;
      margin-top: 10px;
      padding: 10px;
    }

    .groupbox {
      /deep/ .ant-input {
        border-radius: 4px;
      }
    }

    /deep/ .ant-table-body {
      border: 1px solid #BBBBBB;
      border-radius: 8px 8px 0 0;
    }

    /deep/ .ant-table-tbody {
      background-color: #ffffff;
    }

    /deep/ .ant-table-pagination.ant-pagination {
      float: none !important;
      margin: 16px auto !important;
      text-align: center !important;
    }
  }
</style>
